/* 流动的彩色粒子效果 */
#particles-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation-name: float-particle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  background: radial-gradient(circle at center, currentColor 0%, transparent 70%);
  box-shadow: 0 0 10px 2px currentColor;
}

@keyframes float-particle {
  0%, 100% {
    transform: translateY(110vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.4;
  }
  50% {
    transform: translateY(30vh) translateX(10vw);
    opacity: 0.7;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
}

/* 生成不同大小、颜色和动画时间的粒子 */
.particle:nth-child(3n+1) {
  width: 4px;
  height: 4px;
  color: #1677FF; /* 拂晓蓝 */
  animation-duration: 10s;
}

.particle:nth-child(3n+2) {
  width: 6px;
  height: 6px;
  color: #52C41A; /* 极光绿 */
  animation-duration: 13s;
}

.particle:nth-child(3n+3) {
  width: 8px;
  height: 8px;
  color: #722ED1; /* 酱紫 */
  animation-duration: 16s;
}

/* 使用负的动画延迟，让粒子一开始就处于动画中的不同位置 */
.particle:nth-child(13n+1) { animation-delay: -9s; }
.particle:nth-child(13n+2) { animation-delay: -8s; }
.particle:nth-child(13n+3) { animation-delay: -7s; }
.particle:nth-child(13n+4) { animation-delay: -6s; }
.particle:nth-child(13n+5) { animation-delay: -5s; }
.particle:nth-child(13n+6) { animation-delay: -4s; }
.particle:nth-child(13n+7) { animation-delay: -3s; }
.particle:nth-child(13n+8) { animation-delay: -2s; }
.particle:nth-child(13n+9) { animation-delay: -1s; }
.particle:nth-child(13n+10) { animation-delay: 0s; }
.particle:nth-child(13n+11) { animation-delay: -10s; }
.particle:nth-child(13n+12) { animation-delay: -11s; }
.particle:nth-child(13n+13) { animation-delay: -12s; }

/* 粒子水平位置随机分布 */
.particle:nth-child(11n+1) { left: 5%; }
.particle:nth-child(11n+2) { left: 15%; }
.particle:nth-child(11n+3) { left: 25%; }
.particle:nth-child(11n+4) { left: 35%; }
.particle:nth-child(11n+5) { left: 45%; }
.particle:nth-child(11n+6) { left: 55%; }
.particle:nth-child(11n+7) { left: 65%; }
.particle:nth-child(11n+8) { left: 75%; }
.particle:nth-child(11n+9) { left: 85%; }
.particle:nth-child(11n+10) { left: 95%; }
.particle:nth-child(11n+11) { left: 10%; }

/* 粒子垂直位置随机分布 */
.particle:nth-child(17n+1) { bottom: -10%; }
.particle:nth-child(17n+2) { bottom: 0%; }
.particle:nth-child(17n+3) { bottom: 10%; }
.particle:nth-child(17n+4) { bottom: 20%; }
.particle:nth-child(17n+5) { bottom: 30%; }
.particle:nth-child(17n+6) { bottom: 40%; }
.particle:nth-child(17n+7) { bottom: 50%; }
.particle:nth-child(17n+8) { bottom: 60%; }
.particle:nth-child(17n+9) { bottom: 70%; }
.particle:nth-child(17n+10) { bottom: 80%; }
.particle:nth-child(17n+11) { bottom: 90%; }
.particle:nth-child(17n+12) { bottom: 100%; }
.particle:nth-child(17n+13) { bottom: 5%; }
.particle:nth-child(17n+14) { bottom: 15%; }
.particle:nth-child(17n+15) { bottom: 25%; }
.particle:nth-child(17n+16) { bottom: 35%; }
.particle:nth-child(17n+17) { bottom: 45%; }
